<template>
	<view class="top">
		<view class="box">
			<image :src="count.avatarUrl" mode="widthFix" v-if="count.avatarUrl"></image>
			<span>{{count.nickName}}</span>
		</view>
		<view class="box1">
			<h3>以获取您的以下信息</h3>
		</view>
		<view class="box2">
			<image :src="src" mode=""></image>
			<span>微信昵称.头像</span>
			<view class=" shan" v-if="isshow" @click="jian">
				删除
			</view>
		</view>
		<button @click="jiana">管理</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isshow: false,
				src: '../../static/h.jpg'
			}
		},
		methods: {
			...mapMutations(['Minuss']),
			jian() {
				this.Minuss()
				// uni.openSetting({})
			},
			jiana() {
				this.isshow = !this.isshow
				if (this.isshow == false) {
					this.src = '../../static/h.jpg'
				} else {
					this.src = '../../static/g.jpg'
				}

			},
		},
		computed: {
			...mapState({
				count: state => state.crad.count
			}),

		}
	}
</script>

<style scoped>
	.top {
		padding-left: 25rpx;
	}

	.box {
		display: flex;
		width: 250rpx;
	}

	.box span {
		display: block;
		margin-left: 20rpx;
		line-height: 80rpx;
	}

	.box image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 100%;
	}

	.box1 {
		font-size: 35rpx;
		margin: 30rpx 0 30rpx 0;
		font-weight: bold;
	}

	.box2 {
		height: 100rpx;
		overflow: hidden;
		border-bottom: 1px gainsboro solid;
		border-top: 1px gainsboro solid;
		line-height: 100rpx;
	}

	.box2 image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		margin-top: 25rpx;
		float: left;
	}

	.box2 span {
		margin-left: 30rpx;
		display: block;
		float: left;
	}

	.shan {
		float: right;
		margin-right: 50rpx;
		color: white;
		line-height: 50rpx;
		margin-top: 25rpx;
		background-color: red;
		font-size: 25rpx;
		text-align: center;
		border-radius: 20rpx;
		width: 120rpx;
		height: 50rpx;
	}

	button {
		margin-top: 400rpx;

		width: 180rpx;
		line-height: 65rpx;
		height: 65rpx;
		font-size: 25rpx;
		background-color: gainsboro;
	}
</style>
